[#include "/WEB-INF/pages/common/taglibs.ftl"]
[@c.url var="backUrl" value="/manage/Home_welcome.action" scope="page"][/@c.url]
[#macro _script]
	<script type="text/javascript" src="[@c.url value='/js/plugins/jquery.alerts.js'/]"></script>
	<script type="text/javascript">
		var base = (function(){
			// 事件绑定
			function _addEventListeners() {
				//查看详细
				$('a[act=more]').toggle(function(){
					var _table = $(this).next('table');
					_table.fadeIn("slow");
				},function(){
					var _table = $(this).next('table');
					_table.fadeOut("fast");
				})
				//more system info
				$('a.more', '#body').toggle(function(){
					$('#moreSystemInfo').slideDown();
					if (!base.config.isLoad) {
						//初始化标志
						base.config.isLoad = true
						base.plot();
					}
				},function(){
					$('#moreSystemInfo').slideUp();
				})
			}
			function _addPlotListeners(){
				/**REAL TIME CHART**/
				// 记录数据,数据最大250个坐标点
				var data = [], totalPoints = 250;
				// 伊甸园、幸存者、老年代
				var dataEden = [], dataSurvivor = [], dataOld = [];
				// 永久代
				var dataGen = []; 
				// 初始化数据
				function getInitData() {
					var res = [];
					// init memory data
					while (data.length < totalPoints) {
						data.push(0);
					}
					// zip the generated y values with the x values
					for (var i = 0; i < data.length; ++i)
						res.push([i, data[i]])
					return res;
				}
			
				// setup control widget
				var updateInterval = 1000;
				$("#updateInterval").val(updateInterval).change(function () {
					var v = jQuery(this).val();
					if (v && !isNaN(+v)) {
						updateInterval = +v;
						if (updateInterval < 1)
							updateInterval = 1;
						if (updateInterval > 2000)
							updateInterval = 2000;
						$(this).val("" + updateInterval);
					}
				});
			
				// 伊甸园
				var edenOptions = {
				   series: {
					   lines: { show: true, fill: true, fillColor: { colors: [ { opacity: 0.5 }, { opacity: 0.15 } ] } },
					   points: { show: false }
				   },
				   legend: { position: 'nw'},
				   grid: { hoverable: true, clickable: true, borderColor: '#ccc', borderWidth: 1, labelMargin: 10 },
				   yaxis: { min: 0, max: ${memMax[1]/1024} }
				}
				// 幸存者
				var survivorOptions = {
				   series: {
					   lines: { show: true, fill: true, fillColor: { colors: [ { opacity: 0.5 }, { opacity: 0.15 } ] } },
					   points: { show: false }
				   },
				   legend: { position: 'nw'},
				   grid: { hoverable: true, clickable: true, borderColor: '#ccc', borderWidth: 1, labelMargin: 10 },
				   yaxis: { min: 0, max: ${memMax[2]/1024} }
				}
				// 老年代
				var oldOptions = {
				   series: {
					   lines: { show: true, fill: true, fillColor: { colors: [ { opacity: 0.5 }, { opacity: 0.15 } ] } },
					   points: { show: false }
				   },
				   legend: { position: 'nw'},
				   grid: { hoverable: true, clickable: true, borderColor: '#ccc', borderWidth: 1, labelMargin: 10 },
				   yaxis: { min: 0, max: ${memMax[3]/1024} }
				}
				// 永久代
				var genOptions = {
					series: {
					   lines: { show: true, fill: true, fillColor: { colors: [ { opacity: 0.5 }, { opacity: 0.15 } ] } },
					   points: { show: false }
				   },
				   legend: { position: 'nw'},
				   grid: { hoverable: true, clickable: true, borderColor: '#ccc', borderWidth: 1, labelMargin: 10 },
				   yaxis: { min: 0, max: ${memMax[4]/1024} }
				}
				var plotEden = $.plot($("#edenMemory"), [ { data: getInitData() , label: "${(ptName[1])!''}", color: "#ff6138"}], edenOptions);
				var plotSurvivor = $.plot($("#mem1"), [ { data: getInitData() , label: "${(ptName[2])!''}", color: "#00a388"}], survivorOptions);
				var plotGen = $.plot($("#mem2"), [ { data: getInitData() , label: "${(ptName[4])!''}", color: "#050"}], genOptions);
				
				function update() {
					monitorService.plotCurrentMemoryData(function(result){
						var resEden = [];
						var resGen = [];
						var resSurvivor = [];
						var resOld = [];
						dataEden.push((result[1][1]/1024));
						dataSurvivor.push((result[2][1]/1024));
						dataOld.push((result[3][1]/1024));
						dataGen.push((result[4][1])/1024);
						if (dataEden.length > 0)
							dataEden = dataEden.slice(1);
						if (dataSurvivor.length > 0) {
							dataSurvivor = dataSurvivor.slice(1);
						}
						if (dataOld.length > 0) {
							dataOld = dataOld.slice(1);
						}
						if (dataGen.length > 0) 
							dataGen = dataGen.slice(1);
						// init memory data
						while (dataEden.length < totalPoints) {
							dataEden.push(0);
						}
						while (dataSurvivor.length < totalPoints) {
							dataSurvivor.push(0);
						}
						while (dataOld.length < totalPoints) {
							dataOld.push(0);
						}
						while (dataGen.length < totalPoints) {
							dataGen.push(0);
						}
						// zip the generated y values with the x values
						for (var i = 0; i < dataEden.length; ++i){
							resEden.push([i, dataEden[i]])
						}	
						for (var i = 0; i < dataSurvivor.length; ++i){
							resSurvivor.push([i, dataSurvivor[i]])
						}	
						for (var i = 0; i < dataOld.length; ++i){
							resOld.push([i, dataOld[i]])
						}	
						for (var i = 0; i < dataGen.length; ++i){
							resGen.push([i, dataGen[i]])
						}
						plotEden.setData([{ data: resEden , label: "${(ptName[1])!''}", color: "#ff6138"}]);
						plotEden.draw();
						plotSurvivor.setData([ { data: resSurvivor , label: "${(ptName[2])!''}", color: "#00a388"}]);
						plotSurvivor.draw();
						plotGen.setData([ { data: resGen , label: "${(ptName[4])!''}", color: "#050"}]);
						plotGen.draw();
						setTimeout(update, updateInterval);
					});
				}
				function update2() {
					monitorService.plotRuntimeMemory(function(result){
						var totalMemory = result[0];
						var freeMemory = result[1];
						var maxMemory = result[2];
						$('#maxMemory').html(maxMemory + " kb");
						$('#freeMemory').html(freeMemory + " kb");
						$('#totalMemory').html(totalMemory + " kb");
						$('#rateMemory').html(Math.round(((totalMemory/maxMemory)*100)*Math.pow(10, 2))/Math.pow(10, 2) + "%");
						setTimeout(update2, updateInterval*2);
					});
				} 
				update();
				update2();
			};
			return {
                config: {
                	url : null,
                    theme: null,
                    isLoad: false
                },
                init: function () {
                    _addEventListeners();
                },
                plot: function() {
                	_addPlotListeners();
                }
			}
		}());
		
		$(function(){
			var link = "[@c.url value='/manage/Home_welcome.action' /]";
			base.config.theme = getTheme();
			base.config.url = link;
            //Initializing the form
			base.init();
		})
	</script>
[/#macro]

[#macro _content]
		<div class="widgetbox">
            <div class="title"><h2 class="general"><span>欢迎页</span></h2></div>
            <div class="widgetcontent userlistwidget" style="font-size:12px;">
                <ul>
                	<li>
                    	<div class="avatar" style="margin-bottom:20px;"><img alt="" src="[@c.url value='/images/avatar2.png'/]"></div>
                        <div class="info" style="margin-left:64px;">
                        	<a href="javascript:;" style="font-size:12px;">CMS版本信息</a>
                        	<br>版本：${appConfig[_Constants.APP_NAME]} ${appConfig[_Constants.APP_VERSION]}
                        	<br>授权：${appConfig[_Constants.APP_LICENSE]}
                        	<br>当前主题：${appConfig['csstheme']}
                        </div><!--info-->
                    </li>
                    <li>
                    	<div class="avatar" style="margin-bottom:40px;"><img alt="" src="[@c.url value='/images/computer.png'/]"></div>
                        <div class="info" style="margin-left:64px;">
                        	<a href="javascript:;" style="font-size:12px;">服务器信息</a>
                        	[#assign sys=sysInfo.getSystemProps()]
                        	<br> 当前系统账户：${sys['user.name']}
                        	<br> 当前操作系统：${sysInfo.getSystemName()} ${sys['os.arch']}  v${sys['os.version']} 
                            <br> 当前CUP使用率：${monitorInfo.cpuRatio?string('#.0')}%
                            <br> 总物理内存：${monitorInfo.totalMemorySize?string('###,###')}kb&nbsp;&nbsp;/&nbsp;&nbsp;已使用：${monitorInfo.usedMemory?string('###,###')}kb&nbsp;&nbsp;/&nbsp;&nbsp;剩余：${monitorInfo.freeMemory?string('###,###')}kb
                            <br> <a href="javascript:;" act="more">查看详细</a>
                            <table cellspacing="0" cellpadding="0" border="0" class="stdtable" style="display:none;">
                                <thead>
                                    <tr>
                                        <th class="head0 span1" ></th>
                                        <th class="head1"></th>
                                    </tr>
                                </thead>
                                <tbody>
                                	<tr>
                                		<td>时区校准</td>
                                		<td>${sys['user.timezone']}</td>
                                	</tr>
                                    <tr>
                                        <td>用户主目录</td>
                                        <td>${sys['user.home']}</td>
                                    </tr>
                                    <tr>
                                        <td>当前目录</td>
                                        <td>${sys['user.dir']}</td>
                                    </tr>
                                    <tr>
                                        <td>临时目录</td>
                                        <td>${sys['java.io.tmpdir']}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div><!--info-->
                    </li>
                    <li>
                    	<div class="avatar" style="margin-bottom:40px;"><img alt="" src="[@c.url value='/images/computer.png'/]"></div>
                        <div class="info" style="margin-left:64px;">
                        	<a href="javascript:;" style="font-size:12px;">Java运行环境信息</a>
                        	<br>Java 版本：${sys['java.version']}
                            <br> Java 虚拟机：${sys['java.vm.name']}
                            <br> Java运行环境：${sys['java.runtime.name']}
                            <br> 虚拟机最大可使用：${monitorInfo.maxMemory?string('###,###')}kb&nbsp;&nbsp;/&nbsp;&nbsp;已使用：${monitorInfo.totalMemory?string('###,###')}&nbsp;&nbsp;/&nbsp;&nbsp;剩余：${monitorInfo.freeMemory?string('###,###')}kb
                            <br> <a href="javascript:;" act="more">查看详细</a>
                            <table cellspacing="0" cellpadding="0" border="0" class="stdtable" style="display:none;">
                                <thead>
                                    <tr>
                                        <th class="head0 span1" ></th>
                                        <th class="head1"></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>安装目录  </td>
                                        <td>${sys['java.home']}</td>
                                    </tr>
                                    <tr>
                                        <td>提供商</td>
                                        <td>${sys['java.vendor']}</td>
                                    </tr>
                                    <tr>
                                        <td>类路径  </td>
                                        <td>${sys['java.class.path']}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div><!--info-->
                    </li>
                </ul>
                <br clear="all">
                <a class="more" href="javascript:;">更多系统信息</a>
                <div id="moreSystemInfo" style="display:none">
					<div class="one_half">
						<div class="widgetbox">
	                        <div class="title"><h2 class="tabbed"><span id="memTitle1">${(ptName[2])!'OS'}</span></h2></div>
	                        <div class="widgetcontent announcement">
	                           <div id="mem1" style="height: 218px">mem1</div>
	                        </div><!--widgetcontent-->
	                    </div><!--widgetbox-->
					</div><!--one_half-->
	
					<div class="one_half last">
						<div class="widgetbox">
	                        <div class="title"><h2 class="tabbed"><span id="memTitle2">${(ptName[4])!'OS'}</span></h2></div>
	                        <div class="widgetcontent statement">
	                           <div id="mem2" style="height: 218px">mem2</div>
	                        </div><!--widgetcontent-->
	                    </div><!--widgetbox-->                        
					</div><!--one_half-->
					<br clear="all"/>
					
					<div class="contenttitle">
	                	<h2 class="chart"><span>${(ptName[1])!'OS'}</span></h2>
	                </div><!--contenttitle-->
					<div class="widgetbox" >
						<div class="widgetcontent chartbox">
	                        <div id="edenMemory" style="height: 218px"></div>
	                        <div class="one_half">
	                            <div class="analytics analytics2">
	                                <small>虚拟机最大可用内存 &nbsp;<strong id="maxMemory" style="color:red;font-size:14px;"></strong></small>
	                                <h1>已分配 (<span id="totalMemory"></span>) </h1>
	                                <small>已分配内存中剩余 <span id="freeMemory"></span></small>
	                            </div><!--visitoday-->
	                        </div><!--one_half-->
	                        
	                        <div class="one_half last">
	                            <!--<div class="one_half">
	                                <div class="analytics">
	                                    <small>bounce</small>
	                                    <h3>23.2%</h3>
	                                </div>
	                            </div>
	                            <div class="one_half last">
	                                <div class="analytics textright">
	                                    <small class="block">visitors</small>
	                                    <h3>56.8%</h3>
	                                </div>
	                            </div>-->
	                            <br clear="all" />
	                            
	                            <div class="analytics average margintop10">
	                                vm内存使用率 <h3 id="rateMemory"></h3>
	                            </div><!--analytics-->
	                            
	                        </div><!--one_half-->
	                        <br clear="all" />
	                    </div><!--widgetcontent-->
					</div><!--widgetbox-->
					<!-- -->
					
                </div>
            </div><!--widgetcontent-->
        </div>
[/#macro]

	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>欢迎页</title>
		<meta name="menu" content="AdminMenu"/>
		<meta name="heading" content="heading"/>
		<script type="text/javascript" src="[@c.url value='/dwr/engine.js'/]"></script>
  		<script type="text/javascript" src="[@c.url value='/dwr/interface/monitorService.js'/]"></script>
		<script type="text/javascript" src="[@c.url value='/dwr/util.js'/]"></script>
  
		[@_script /]
	</head>
	<body id="body">
		<br/>
		<div id="welcomeTableList">
			[@_content /]
		</div>
	</body>
	</html>
